<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./template/VisitorTemplate.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="begin">
        <f:view beforePhase="#{reservationManagerBean.initProductList}"></f:view>
    </ui:define>
    <ui:define name="contentInsert">   
        <h:body>
            <h:form id="formMain">
                <h1>Visitor Selects Meals and Set Meals</h1>         
                <p:growl id="growl" showDetail="true"/>  
                <p:panel style="position:relative; width:400px;float:left; height:600px;">
                    <p:tabView event="click" >
                        <c:forEach items="#{reservationManagerBean.listOfFoodType}" var="food" varStatus="current">
                            <p:tab title="#{food.name}">
                                <p:dataTable var="meal" value="#{reservationManagerBean.listOfCategory.get(current.index)}"
                                             emptyMessage="No #{food.name}" selection="#{reservationManagerBean.selectedProduct[current.index]}"
                                             rowSelectListener="#{reservationManagerBean.onRowSelect}"
                                             selectionMode="single" onRowSelectUpdate="test">
                                    <p:column sortBy="#{meal.name}" filterBy="#{meal.name}">
                                        <f:facet name="header">
                                            <h:outputText value="ID" />
                                        </f:facet>
                                        <h:outputText value="#{meal.name}" />
                                    </p:column>
                                </p:dataTable>

                            </p:tab>
                        </c:forEach>  
                        <p:tab title="Set Meal">
                            <p:dataTable var="meal" value="#{reservationManagerBean.listOfCategory.get(reservationManagerBean.listOfCategory.size()-1)}" 
                                         emptyMessage="No Set Meal" selection="#{reservationManagerBean.selectedProduct[reservationManagerBean.listOfCategory.size()-1]}"
                                         rowSelectListener="#{reservationManagerBean.onRowSelect}"
                                         selectionMode="single" onRowSelectUpdate="test">
                                <p:column sortBy="#{meal.name}" filterBy="#{meal.name}">
                                    <f:facet name="header">
                                        <h:outputText value="ID" />
                                    </f:facet>
                                    <h:outputText value="#{meal.name}" />
                                </p:column>
                            </p:dataTable>

                        </p:tab>
                    </p:tabView>
                </p:panel>
                <p:panel id="test" style="position:relative; width: 800px;float:left; height: 600px">
                    <p><h:outputText value="Name:" />
                        <h:outputText value="#{reservationManagerBean.meal.name}" style="font-weight: bold"/>
                    </p>  
                    <p><h:outputText value="Description:" />
                        <h:outputText value="#{reservationManagerBean.meal.description}" style="font-weight: bold"/>
                    </p>  
                    <p><h:outputText value="" />
                        <h:graphicImage id="gi" alt="The image could not be found."   value="/images/#{reservationManagerBean.meal.imageLink}" width="250" height="250"></h:graphicImage>
                    </p>  
                    <p><h:outputText value="Offline Price:" />
                        <h:outputText value="#{reservationManagerBean.meal.originalPrice}" style="font-weight: bold"/>
                    </p>       

                    <p><h:outputText value="Online Price:" />
                        <h:outputText value="#{reservationManagerBean.price}" style="font-weight: bold"/>
                    </p>  

                    <p><h:outputText value="Quantity:" />
                        <p:inputText value="#{reservationManagerBean.quantity}" style="font-weight: bold; width:30px;"/>
                    </p>
                    <div style="position:absolute; bottom:0px; left: 300px;">
                        <p:commandButton value="Add" disabled="#{reservationManagerBean.checkContain()}" actionListener="#{reservationManagerBean.addToList}" update="test menu growl" ajax="true"/>  
                        <p:commandButton value="Remove" disabled="#{!reservationManagerBean.checkContain()}" actionListener="#{reservationManagerBean.removeFromList}" update="test menu growl" ajax="true" />
                        <p:commandButton value="Edit" disabled="#{!reservationManagerBean.checkContain()}" actionListener="#{reservationManagerBean.changeValueInList}" update="test menu growl" ajax="true" />
                    </div>
                </p:panel>

                <p:panel id="menu" header="Your menu" style="width:400px; height: 600px; position: relative; float:left;">  
                    <c:forEach items="#{reservationManagerBean.listOfFoodType}" var="food" varStatus="current">
                        <h:outputText value="#{food.name}" styleClass="menu"/>

                        <p:dataList value="#{reservationManagerBean.choiceList.get(current.index)}" var="selectedProduct" type="ordered" style="width:200%" >  
                           #{selectedProduct.name} 
                        </p:dataList> 

                    </c:forEach>
                    <h:outputText value="Set Meal" styleClass="menu"/>
                    <p:dataList value="#{reservationManagerBean.choiceList.get(reservationManagerBean.listOfCategory.size()-1)}" var="selectedProduct" type="ordered" style="width:400%">  
                        #{selectedProduct.name}
                    </p:dataList>
                    <div style="position:absolute; bottom:0px; float:none; text-align: justify">
                        <h:outputText value="Total offline bill: " />
                        <h:outputText value="#{reservationManagerBean.totalBill}" style="font-weight: bold; color:blue;"/>
                        <p>
                            <h:outputText value="Total online bill: " />
                            <h:outputText value="#{reservationManagerBean.discountBill}" style="font-weight: bold; color:red;"/>
                        </p>
                        <p>
                            <h:outputText value="You Save:" />
                            <h:outputText value="#{reservationManagerBean.totalBill - reservationManagerBean.discountBill}" style="font-weight: bold; color:purple;"/>
                        </p>
                        <p:commandButton id="btn" value="Confirm Reservation" update="panel" action="VisitorConfirmReservation?faces-redirect=true"/>
                    </div>
                </p:panel>


            </h:form>
        </h:body>
    </ui:define>
</ui:composition>